<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <title>Connectome</title>
  <link rel="stylesheet" href="niivue.css" />
</head>

<body>
  <noscript>
    <strong>niivue doesn't work properly without JavaScript enabled. Please enable
      it to continue.</strong>
  </noscript>
  <header>
    <label for="xRaySlider">XRay</label>
      <input
        type="range"
        min="0"
        max="5"
        value="2"
        class="slider"
        id="xRaySlider"
      />
    <label for="save">Save the current scene as HTML</label>
    <button id="save">Save as HTML</button>
  </header>
  <main id="container">
    <canvas id="gl1"></canvas>
  </main>
  <footer>
    <textarea id="scriptText" name="customText" rows="16" cols="60">
      let connectome = {
        name: "simpleConnectome",
        nodeColormap: "warm",
        nodeColormapNegative: "winter",
        nodeMinColor: 2,
        nodeMaxColor: 4,
        nodeScale: 3, //scale factor for node, e.g. if 2 and a node has size 3, a 6mm ball is drawn
        edgeColormap: "warm",
        edgeColormapNegative: "winter",
        edgeMin: 2,
        edgeMax: 6,
        edgeScale: 1,
        nodes: [
          {
            name: "RF",
            x: 40,
            y: 40,
            z: 30,
            colorValue: 2,
            sizeValue: 2
          },
          {
            name: "LF",
            x: -40,
            y: 40,
            z: 20,
            colorValue: 2,
            sizeValue: 2
          },
          {
            name: "RP",
            x: 40,
            y: -40,
            z: 50,
            colorValue: 3,
            sizeValue: 3
          },
          {
            name: "LP",
            x: -40,
            y: -40,
            z: 50,
            colorValue: 4,
            sizeValue: 4
          }
        ],
        edges: [{
          first: 0,
          second: 1,
          colorValue: 2
        },
        {
          first: 0, 
          second: 2,
          colorValue: -3
        },
        {
          first: 0,
          second: 3,
          colorValue: 4
        },
        {
          first: 1,
          second: 3,
          colorValue: 6
        }],
      };
</textarea>
    &nbsp;<button id="custom">Custom Connectome</button>&nbsp;
    </footer>  
</body>

</html>
<script type="module" async>
  import * as niivue from "../dist/index.js";
  import { esm } from "../dist/index.min.js";
  
  xRaySlider.onchange = function () {
    nv1.opts.meshXRay = this.value / 10;
    nv1.drawScene();
  };

  function saveAsHtml() {
      nv1.saveHTML("connectome.html", "gl1", decodeURIComponent(esm));
  }

  var volumeList1 = [
    // first item is background image
    {
      url: "../images/mni152.nii.gz", //"./images/RAS.nii.gz", "./images/spm152.nii.gz",
      colormap: "gray",
    },
  ];
  
  var nv1 = new niivue.Niivue({ show3Dcrosshair: true, isColorbar: true });
  await nv1.attachTo("gl1");
  nv1.setSliceType(nv1.sliceTypeMultiplanar);
  nv1.opts.multiplanarShowRender = niivue.SHOW_RENDER.ALWAYS;
  nv1.opts.meshXRay = 0.2;
  await nv1.loadVolumes(volumeList1);
  nv1.volumes[0].colorbarVisible = false; //hide colorbar for anatomical scan
  nv1.setClipPlane([-0.1, 270, 0]);
  var custom = document.getElementById("custom");
  custom.onclick = () => {
    let val = document.getElementById("scriptText").value;
    val += '; nv1.loadConnectome(connectome);';
    val && eval(val);
  }
  custom.dispatchEvent(new Event("click"));
  let saveButton = document.getElementById("save");
    saveButton.onclick = saveAsHtml;
</script>